<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="./npm-yarn/node_modules/bootstrap/dist/css/bootstrap.css">
    <script src="./npm-yarn/node_modules/bootstrap/dist/js/"></script>

    <!-- 引入公共css -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入个性css -->
    <link rel="stylesheet" href="./css/landing.css">
    <!-- 引入jq -->
    <script src="./npm-yarn/node_modules/jquery/dist/jquery.js"></script>

</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="container">
            <div class="row">
                <div class="col">
                    <i class="phone">028-86261949</i>
                </div>
                <div class="col-md-auto">
                    <a href="#"><span>首页</span></a>
                </div>
                <div class="col-md-auto">
                    <a href="#"><span>登录</span></a>
                </div>
                <div class="col-md-auto">
                    <a href="#"><span>快速注册</span></a>
                </div>
                <div class="col-md-auto">
                    <a href="#"><span>帮助</span></a>
                </div>
            </div>
        </div>
    </header>
    <!-- 主体 -->
    <main>
        <div class="intro">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 TheUserLogin">
                        <span><img src="./images/logo.png" alt=""></span>
                        <span>用户登录</span>
                    </div>
                </div>
            </div>
        </div>
      <div>
          <div class="container UsersLogin">用户登录</div>
          <form class="needs-validation container" novalidate>
            <div class="form-row">
              <div class="col-md-6 mb-3">
                <label for="validationCustom01">姓名</label>
                <input type="text" class="form-control" id="validationCustom01" required>
                <div class="invalid-feedback">
                  失败
                 </div>
                 <div class="valid-feedback">
                   成功
                  </div>
              </div>          
            </div>
            <div class="form-row">
              <div class="col-md-6 mb-3">
                <label for="validationCustom03">City</label>
                <input type="text" class="form-control" id="validationCustom03" required>
                <div class="invalid-feedback">
                 失败
                </div>
                <div class="valid-feedback">
                  成功
                 </div>
              </div>
            </div>
            <div class="form-group">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                <label class="form-check-label" for="invalidCheck">
                    同意条款和条件
                </label>
                <div class="invalid-feedback">
                    提交前必须同意。
                </div>
              </div>
            </div>
            <button class="btn btn-primary" type="submit">Submit form</button>
          </form>
      </div>
          
          <script>
          // Example starter JavaScript for disabling form submissions if there are invalid fields
          (function() {
            'use strict';
            window.addEventListener('load', function() {
              // Fetch all the forms we want to apply custom Bootstrap validation styles to
              var forms = document.getElementsByClassName('needs-validation');
              // Loop over them and prevent submission
              var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                  if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                  }
                  form.classList.add('was-validated');
                }, false);
              });
            }, false);
          })();
          </script>
    </main>
    <!-- 尾部 -->
    <footer></footer>
</body>

</html>